<template>
  <div>
    <div class="tou">
      <!-- <div class="fanhui" @click="fanhui_btu()">
        <i class="el-icon-arrow-left"></i>
      </div> -->
      购物车
    </div>
    <div class="zhong">
      <div class="kuang">
        <div class="fuxuan">
          <el-checkbox v-model="checked">全选</el-checkbox>
        </div>
        <div class="list" v-for="(item, index) in list" :key="index">
          <div class="zuo">
            <div class="xuanze">
              <el-checkbox v-model="checked" @change="xuanzhong"></el-checkbox>
            </div>
            <div class="tu">
              <el-image
                style="width:100px; height: 90px"
                :src="item.img"
                :fit="fit"
              ></el-image>
            </div>
          </div>
          <div class="you">
            <div class="y_shang">{{ item.name }}</div>
            <div class="y_zhong" style="color:red;">{{item.money}}</div>
            <div class="y_xia">
              <div class="yx_zuo">
                <el-input-number
                  size="mini"
                  v-model="num4[index]"
                  :min="0"
                  @change="Change(index)"
                ></el-input-number>
              </div>
              <div class="yx_you">{{jiaqian[index]}}元</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="zongjia">
      <div class="quan"><el-checkbox v-model="checked">全选</el-checkbox></div>
      <div class="zong_jia">总计：</div>
      <div class="jie_btn">
        <el-row>
          <el-button type="primary" round>去结算</el-button>
        </el-row>
      </div>
    </div>
    <div class="yun">
      <van-tabbar v-model="active" route>
        <van-tabbar-item name="首页" icon="home-o" replace to="/zhuye"
          >首页</van-tabbar-item
        >
        <van-tabbar-item name="找药" icon="search" replace to="/zhaoyao"
          >找药</van-tabbar-item
        >
        <van-tabbar-item
          name="购物车"
          icon="shopping-cart-o"
          replace
          to="/shopping"
          >购物车</van-tabbar-item
        >
        <van-tabbar-item name="我的" icon="user-o" replace to="/wode"
          >我的</van-tabbar-item
        >
      </van-tabbar>
    </div>
  </div>
</template>
<script>
export default {
  inject: ['reload'],
  data() {
    return {
      checked:false,
      num4: [],
      active: "首页",
      list: [],
      fit: "cover",
      ID: [],
      list2:[],
      a:"",
      jiaqian: []
    };
  },
  methods: {
    fanhui_btu() {
      this.$router.go(-1);
    },
     xuanzhong() {
     console.log(1111)
    },
    Change(cc) {
      this.jiaqian = []
      if (this.num4[cc] == 0) {
        this.axios({
          method: "post",
          url: "http://localhost:3000/shanchu_gouwuche",
          data: {
            id: this.ID[cc],
          },
        })
          .then((res) => {
            console.log(res.data);
            console.log(111)
          })

          .catch((error) => {
            console.log(error);
          });
           this.reload()
      }
      // console.log(this.list2);
      /* console.log(this.list2[cc]); */
      /* console.log(this.num4[cc]);
      console.log(this.list2);
      console.log(this.list2[cc]); */
       /* this.list2[cc] = this.list2[cc].split("元" , 1) */
       this.num4.map((item, index) => {
          // var jiage = item * this.list[index]
          // console.log(this.num4[index])
          this.list2[index] * this.num4[index]
          this.jiaqian.push(this.list2[index] * this.num4[index])
       })
      //  this.a = this.num4[cc] * (this.list2[cc]-0)
       console.log(this.jiaqian)
      //  console.log(2222222222222);
      //  console.log(this.num4[cc]);
      //  console.log(this.list2[cc]-0);
      //  console.log(this.list2);
      
      //  console.log(this.list2[cc]); 
    },
  },
  mounted() {
    console.log(111);
    this.axios({
      method: "post",
      url: "http://localhost:3000/get_gouwuche",
    })
      .then((res) => {
        console.log(res);
        this.list = res.data.data;
        console.log(this.list);
        this.list.map((item) => {
          console.log(item.number);
          this.ID.push(item.id);
          this.num4.push(item.number);
          this.list2.push(item.money.split("元" , 1))
        });
        console.log(this.num4);
        this.list2.map((item,index)=>{
                  this.list2[index] * this.num4[index]
          this.jiaqian.push(this.list2[index] * this.num4[index])
          console.log(1111)
          console.log( this.jiaqian)
      })
      })
      .catch((error) => {
        console.log(error);
      });
      
  },
};
</script>
<style scoped>
.tou {
  height: 50px;
  background-color: rgb(1, 154, 254);
  color: white;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  font-weight: bold;
  position: relative;
}
/* .fanhui{
  position:absolute ;
  width: 50px;
  height: 50px;
} */
.zhong {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.kuang {
  padding-top: 10px;
  width: 95%;
  border-radius: 5px 5px;
}
.list {
  display: flex;
  height: 100px;
  padding-top: 5px;
  padding-bottom: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.fuxuan {
  width: 100%;
  height: 30px;
}
.zuo {
  flex: 1;
  display: flex;
}
.you {
  flex: 3;

  display: flex;
  flex-direction: column;
}
.xuanze {
  top: 0;
  bottom: 0;
  margin: auto;
}
.tu {
  flex: 1;
}
.y_zhong{
  flex: 1;
}
.y_shang {
  flex: 1;
}
.y_xia {
  flex: 1;
  display: flex;
}
.yx_zuo {
  flex: 1;
}
.yx_you {
  flex: 1;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
  color: red;
  line-height: 30px;
  font-size: 17px;
}

.zongjia {
  width: 95%;
  height: 50px;
  position: fixed;
  left: 10px;
  bottom: 50px;
  background-color:white;
  border-radius: 10px;
  margin: 0 auto;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
   z-index: 3;
}
.quan {
  position: absolute;
  top: 10px;
  left: 5px;
}
.zong_jia {
  height: 20px;
  position: absolute;
  top: 10px;
  left: 75px;
}
.jie_btn {
  position: absolute;
  top: 5px;
  right: 20px;
}
.yun {
  position: fixed;
  bottom: 0px;
  z-index: 3;
}
</style>